<breadcrumb></breadcrumb>

<mat-card>
  <section>
    <h2>Types of coffee (fix-height grid-list)</h2>
    <mat-grid-list role="list" [cols]="fixedCols" [rowHeight]="fixedRowHeight">
      <mat-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
                     [style.background]="tile.color" role="listitem">
        {{tile.text}}
      </mat-grid-tile>
    </mat-grid-list>
  </section>

  <section>
    <h2>Types of coffee (ratio-height grid list)</h2>
    <mat-grid-list role="list" cols="2" [rowHeight]="ratio" gutterSize="4px">
      <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'" role="listitem">
        {{tile.text}}
      </mat-grid-tile>
    </mat-grid-list>
  </section>

  <section>
    <h2>Types of coffee (fit-height grid list)</h2>
    <mat-grid-list role="list" cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
                   [style.height]="fitListHeight">
      <mat-grid-tile *ngFor="let tile of tiles" role="listitem" [style.background]="'#F1EBBA'">
        {{tile.text}}
      </mat-grid-tile>
    </mat-grid-list>
  </section>

  <section>
    <h2>Angular team dogs (Grid list with header and footer)</h2>
    <mat-grid-list role="list" cols="3" rowHeight="200px">
      <mat-grid-tile *ngFor="let dog of dogs" role="listitem">
        <mat-grid-tile-header>{{dog.name}}</mat-grid-tile-header>
        <img alt="Photo of {{dog.name}}"
             src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
        <mat-grid-tile-footer>
          <span mat-line>Human: {{dog.human}}</span>
        </mat-grid-tile-footer>
      </mat-grid-tile>
    </mat-grid-list>
  </section>
</mat-card>